<template>
	<!--表格单选-->
	<el-row class="goods">
  		<el-col :span="24">
  			<!--查询过滤条件-->
  			<el-form :inline="true" :model="conditionForm" ref="conditionForm" label-width="82px">
  				<el-form-item label="名称">				
					<m-input-auto-comp :inputData="conditionForm" :queryInterUrl="urlPaths.queryList" queryParamName="goodsName"/>
				</el-form-item>
				<el-button type="primary" size="small" @click="queryTableData">查询</el-button>
			</el-form>
  		</el-col>
  		<el-col :span="24">
  			<!--表格数据展示-->
  			<div>
	  			<el-button type="primary" size="small" icon="plus" v-on:click="addFn">新增</el-button>
	  			<el-button type="primary" size="small" icon="edit" v-on:click="editFn">修改</el-button>
	  			<el-button type="primary" size="small" icon="delete" v-on:click="deleteFn">删除</el-button>
	  			<!--<router-link :to="{name:'goodsGallery',params:{setid:1111222}}">
				    <el-button type="primary" size="small" icon="delete">跳转1</el-button>
				</router-link>-->
				<!--<el-button type="primary" size="small" icon="delete" v-on:click="jumpBtn">跳转1</el-button>-->
  			</div>
  			<div class="data-list">
				<!-- <el-table :data="tableDataPage" border style="width: 100%" highlight-current-row @current-change="handleCurrentChange">
					<el-table-column width="50">
						<template slot-scope="scope">
							<label class="radio">
								<input type="radio" value="2" name="radio" :data-index="scope.row.index">
								<span class="dot"></span>
							</label>
						</template>
					</el-table-column>
					<el-table-column type="expand">
						<template slot-scope="props">
					        <el-form label-position="left" inline class="goods-table-expand">
					        	<el-form-item v-for="column in tableColumn" :prop="column.columnName" :label="column.columnLabel" v-if="!column.isPicColumn">
					        		<span>{{ props.row[column.columnName] }}</span>
					        	</el-form-item>
					        </el-form>
					    </template>
					</el-table-column>
					<el-table-column v-for="column in tableColumn" :prop="column.columnName" :label="column.columnLabel" 
						v-if="column.isColumnShow" :show-overflow-tooltip="true" sortable>
						<template slot-scope="scope" >
							<div v-if="column.isPicColumn">
								<img v-if="isPicPath(scope.row, column.columnName)" :src="scope.row[column.columnName]" :alt="scope.row[column.columnName]" style="width: 50px;height: 50px">
								<i v-else class="el-icon-picture-outline" style="width: 50px;height: 50px"></i>
							</div>
							<div v-else>
								{{ tranColumnValue(column.columnName, scope.row[column.columnName]) }}
							</div>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
			      @size-change="pageSizeChange"
			      @current-change="handleCurrentChangePage"
			      :current-page="pagination.currentPage"
			      :page-sizes="[10,20, 50, 100, 200]"
			      :page-size="pagination.pageSize"
			      layout="->,prev, pager, next, jumper, sizes,total"
			      :total="pagination.totalSize">
			    </el-pagination> -->
				<m-table-complex :tableDatas="tableDatalist" :queryTableDataUrl="urlPaths.queryList" :queryTableDataParms="conditionForm" :tableColumn="tableColumn"
					ref="tableChild" :isColExpand="true" @select-rowidx-handler="handleCurrentChange">
				</m-table-complex>
			</div>
  		</el-col>
  		<!--<el-col :span="24">-->
  			<!--新增和修改 dialog-->
			<el-dialog :title="dialogTitle" v-if="dialogVisible" :visible.sync="dialogVisible" customClass="customStyle">
				<el-form :model="configform" ref="configform" :rules="rules" label-width="100px">
					<m-dialog-form-item v-for="column in tableColumn" :configform="configform" :columnInfo="column"
						:uploadImgAttr="uploadDatas">
					</m-dialog-form-item>
					<!--<el-form-item v-for="(columnValue, columnKey) in configform" :label="transAttrName(columnKey)" v-if="isEditEnabled(columnKey)">
						<el-col :span="12">
							<el-select v-if="isShowSelectList(columnKey)" v-model="configform[columnKey]" filterable placeholder="请选择">
								<el-option v-for="item in getSelectOption(columnKey)" :key="item.id" :label="item.name" :value="item.id"></el-option>
							</el-select>
							<el-cascader v-else-if="isShowCascaderSelectList(columnKey)" expand-trigger="hover" 
								v-model="configform[columnKey]" :options="categoryDatalist" :props="categorySelectProps" @change="cascaderSelectHandleChange">
							</el-cascader>
							<el-input v-else style="width:100%" v-model="configform[columnKey]"
								:clearable="true" :readonly="isShowUploadPic(columnKey)"></el-input>
						</el-col>
						<el-col :span="12" v-if="isShowUploadPic(columnKey)">
							<m-upload-img :imgsAttrName="uploadDatas" :itemAttr="columnKey" :isMultImgs="isShowMulUploadPic(columnKey)" 
								ref="uploadChild" @response-handler="afterUploadHandler">
							</m-upload-img>
						</el-col>
					</el-form-item>-->
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="closeDialog">取 消</el-button>
					<el-button type="primary" @click="saveSubmit">确 定</el-button>
				</div>
			</el-dialog>
		<!--</el-col>-->
	</el-row>
</template>
<script>
	import {
		Message
	} from 'element-ui';
	import store from '../../store'
	import goodsGallery from './goodsGallery.vue'
	import mainPage from '../Home.vue'
	
	export default {
		components:{},
		data() {
			return {
				tableDatalist:[
					{
						id:'123',
						name:'惠氏金装250',
						goodsSn:'',
						brandId:'2',
						categoryId:'1',
						goodsNumber:1,
						goodsUnit:'',
						keywords:'',
						goodsBrief:'',
						goodDesc:'奶粉',
						isHot:true,
						listPicUrl:'',
						imgUrl:''
					}
				],
				tableDataPage:[],
				// brandDatalist:[],
				categoryDatalist:[],
				conditionForm: { //查询过滤的条件
					goodsName:''
				},
				tableColumn:[ 
					{
						columnName:'id', //主键字段，修改和删除的依赖列
						columnLabel:'ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'name',
						columnLabel:'名称',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'goodsSn',
						columnLabel:'产品编码',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'brandId',
						columnLabel:'品牌',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
						isInputSelectList:true,
						selectListData:[],
						dataQueryUrl:'brand/selectList'
					},
					{
						columnName:'categoryId',
						columnLabel:'类别',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:false,
					},
					{
						columnName:'categoryIds',
						columnLabel:'多级类别',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
						isInputCascaderSelectList:true,
						selectListData:[],
						dataQueryUrl:'category/selectList'
					},
					{
						columnName:'goodsNumber',
						columnLabel:'库存',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'goodsUnit',
						columnLabel:'单位',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'keywords',
						columnLabel:'关键字',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
						defaultValue:''
					},
					{
						columnName:'goodsBrief',
						columnLabel:'产品特点',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'sortOrder',
						columnLabel:'搜索排序',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'1'
					},
					{
						columnName:'isNew',
						columnLabel:'是否新品',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'1'
					},
					{
						columnName:'isOnSale',
						columnLabel:'是否有售',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'1'
					},
					{
						columnName:'isDelete',
						columnLabel:'是否删除',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'addTime',
						columnLabel:'上架时间',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue: new Date().getTime()
					},
					{
						columnName:'attributeCategory',
						columnLabel:'属性类别',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'retailPrice',
						columnLabel:'零售价格',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'counterPrice',
						columnLabel:'专柜价格',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'extraPrice',
						columnLabel:'附加价格',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'appExclusivePrice',
						columnLabel:'APP专享价格',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'sellVolume',
						columnLabel:'销售量',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
						defaultValue:'0'
					},
					{
						columnName:'unitPrice',
						columnLabel:'单位价格',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'primaryProductId',
						columnLabel:'primaryProductId',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'promotionDesc',
						columnLabel:'限时购',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'限时购'
					},
					{
						columnName:'promotionTag',
						columnLabel:'promotionTag',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:''
					},
					{
						columnName:'isAppExclusive',
						columnLabel:'是否APP专属',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'isLimited',
						columnLabel:'是否限量',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
						defaultValue:'0'
					},
					{
						columnName:'isHot',
						columnLabel:'是否热门',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
						defaultValue:'0'
					},
					{
						columnName:'goodsDesc',
						columnLabel:'详细描述',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
						isPicColumn:true,
						isMulUploadPic:true,
					},
					{
						columnName:'listPicUrl',
						columnLabel:'列表图 800*800',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
						isPicColumn:true,
					},
					{
						columnName:'primaryPicUrl',
						columnLabel:'主图片地址800*800',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
						isPicColumn:true,
					}
				],
				urlPaths:{
					queryList:'goods/listAll',
					delByKey:'goods/delete',
					insert:'goods/add',
					updateByKey:'goods/update',
					importFileUrl:store.state.global.url +'/upload/image',

					brandQueryList:'brand/selectList',
					categoryQueryList:'category/selectList',
				},
				configform: {},
				index: '',
				dialogVisible: false,
				dialogTitle:'新增',
				categorySelectProps:{
					label: 'categoryName', 
					value: 'categoryId', 
					children: 'subCategorylist'
				},
				rules: {
				},
				currentRow: null,
				pagination:{
					totalSize:0,
					pageSize: 20,
					currentPage:1,
				},
				uploadImgs: {},
				uploadDatas:{
					clazz:'goods',
					columnName:''
				},
				uploadFileList: []
			}
		}, 
		computed:{
// 			/**
// 			 * @author：01367604
// 			 * @function: 转换表中显示的属性值，将ID转换成名称
// 			 * @pramas: 
// 			 */
// 			tranColumnValue(columnName, columnValue){
// 				return function (columnName, columnValue){
// //					console.log(columnName+ ': '+columnValue);
// 					var colElem;
// 					if (columnName === 'brandId'){
// 						colElem = this.brandDatalist.find((element) => (element.id == columnValue))
// 					} else if (columnName === 'categoryId'){
// 						colElem = this.categoryDatalist.find((element) => (element.id == columnValue))
// 					}
// 					if (colElem !=undefined && colElem.name !=undefined && colElem.name.length>0){
// //						console.log(colElem);
// 						return colElem.name;
// 					} else {
// 						return columnValue;
// 					}
// 				}
// 			},
// 			/**
// 			 * @author：yc
// 			 * @function: 表中属性是否为图片地址，显示成缩略图
// 。			 * @pramas: 
// 			 */
// 			isPicPath(value, columnName){
// 				return function (value, columnName){
// //					console.log(value);
// //					console.log(columnName);
// //					console.log(value[columnName]);
// 					return value[columnName]!=undefined && value[columnName].length>0;
// //					return false;
// 				}
// 			},
//			/**
//			 * @author：01367604
//			 * @function: 转换新增和修改model框中显示的属性名称，将英文列名转换成中文描述
//			 * @pramas: 
//			 */
//			transAttrName(value){
//				return function (value){
////					#console.log(value);
//					var resLabel;
//					var colElem = this.tableColumn.find((element) => (element.columnName == value))
//					if (colElem.columnLabel != undefined && colElem.columnLabel.length>0){
//						resLabel= colElem.columnLabel;
//					} else {
//						resLabel= colElem.columnName;
//					}
//					return resLabel;
//				}
//			},

		},
		beforeCreate(){
    	},
    	mounted() {
    		this.initData();
		},
		methods: {
			initData(){
//				this.queryCategoryData();
			},
			queryTableData(){
				this.$refs.tableChild.initData();
			},
//			queryCategoryData(){
//				/*查询类别下拉列表数据接口*/
//				this.$httpExt().get(this.urlPaths.categoryQueryList).then((response) => {
//					var rows= response.rows;
//					console.log('Category select size:' + rows.length);
//					this.categoryDatalist = rows;
//					// console.log(this.categoryDatalist);
//				},(response) => {
//					Message({
//						message: '服务器请求失败，请重试！',
//						type: 'warning'
//					});
//				});
//			},
			/*选择一条数据*/
			handleCurrentChange(val) {
				if(!val) {
					return
				}
				this.currentRow = val;
				this.index = val.index+''
				console.log('this.currentRow ',this.currentRow);
				console.log('this.index ',this.index);
			},
			/*新增*/
			addFn(){
				this.dialogVisible = true;
				this.dialogTitle='新增';
				/*if(this.$refs['configform']!=undefined) {
					this.$refs['configform'].resetFields();
				}*/
				this.setFormData();
			},
			/*编辑*/
			editFn(){
				if(this.index) {
					this.dialogVisible = true;
					this.dialogTitle='编辑';
					this.setFormData();
				}else{
					Message({
						message: '请选择一条进行操作！',
						type: 'warning'
					});
				}
			},
			setFormData(){
//				this.queryCategoryData(); //异步查询下拉框数据
				var form ={};
				for(let col of this.tableColumn){
					if (this.dialogTitle=='新增'){
						if (col.isInputCascaderSelectList){
							form[col.columnName] = [];
						} else if (col.defaultValue != undefined && col.defaultValue!=''){
							form[col.columnName] = col.defaultValue;
						} else {
							form[col.columnName] = '';
						}
						//cleanUploadFile(col.columnName);
					} else {
						if (col.isInputCascaderSelectList){
							form[col.columnName] = this.currentRow['categoryIds'];
						} else {
							form[col.columnName] = this.currentRow[col.columnName];
						}
					}
				}
				this.configform = form;
			},
			/*删除*/
			deleteFn(){
				if(this.index) {
					this.$confirm('你确定要删除吗？', '删除提示', {
			          	confirmButtonText: '确定',
			          	cancelButtonText: '取消',
			          	type: 'warning'
			        }).then(() => {
			        	//调删除接口
			        	console.log(this.currentRow.id);
			        	this.$httpExt().get(this.urlPaths.delByKey, {
							id:this.currentRow.id
						}).then((response) => {
//							Message({
//								message: response.msg,
//								type: 'success'
//							});
							this.queryTableData();
						},(response) => {
							Message({
								message: '服务器请求失败，请重试！',
								type: 'warning'
							});
						});
			        });
				}else{
					Message({
						message: '请选择一条进行操作！',
						type: 'warning'
					});
				}
			},
			/*提交*/
			saveSubmit(){				
//				this.$refs.configform.validate((valid) => {
//					if(valid) {
//						
//						}
//					}
//				});
				var that = this;
				if(this.dialogTitle == '新增') {
//							that.configform.id = '';
					var url = this.urlPaths.insert;
				} else {
					var url = this.urlPaths.updateByKey;
				}
				
				// 转换提交的数据
				var categoryList = this.configform['categoryIds'];
				this.configform['categoryId']= categoryList[1];
				if (this.configform['counterPrice']=='0'){
					this.configform['counterPrice']=this.configform['retailPrice'];
				}
				if (this.configform['appExclusivePrice']=='0'){
					this.configform['appExclusivePrice']=this.configform['retailPrice'];
				}
				console.log(this.configform);
				this.$httpExt().post(url,that.configform).then((response) => {
					if(response.succ == 'ok') {
						that.dialogVisible = false;
//						if(this.dialogTitle == '新增') {
//							var currentPage = 1;
//						} else {
//							currentPage = that.pagination.currentPage;
//						}
						that.queryTableData();
					}
				}, (data) => {
					Message({
						message: data.msg ? data.msg : '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
//				this.tableDatalist.push(that.configform);
				this.cleanUploadFile();
			},
			jumpBtn(){
				console.log(mainPage);
			},
			closeDialog(){
				this.cleanUploadFile();
				this.dialogVisible = false;
			},
			cleanUploadFile(){
				if (this.$refs.uploadChild==undefined){
					return;
				} else if (this.$refs.uploadChild instanceof Object){
					console.log('close uploadImg item');
					this.$refs.uploadChild.cleanUploadFile();
				} else if (this.$refs.uploadChild instanceof Array){
					console.log('close uploadImg items');
					for (var uploadChildCom of this.$refs.uploadChild){
						uploadChildCom.cleanUploadFile();
					}
				}
			},
			handleReset() {
				this.newlyFormVisible = false
			},
//			cascaderSelectHandleChange(value){
//				console.log(value);
//			},
//			afterUploadHandler(data){
//				console.log(data);
//				this.configform[data.columnName] = data.res;
//			}
	    },
//	    watch:{
//　　　　　　　　example0(curVal,oldVal){
//　　　　　　　　　　console.log(curVal,oldVal);
//　　　　　　　　},
//		}
	}
</script>
<style>
.fl{
	float: left;
}
.goods a{
	color: #20a0ff;
	text-decoration: none;
}
.goods-table-expand {
    font-size: 0;
  }
.goods-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
.goods-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
.customStyle{
    width:90%;
}

</style>